<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            background-color: #ff0;

            /* 根据设计效果图 其尺寸为200 * 400 （1像素都不能差） */
            width: 200px;
            height: 400px;

            /* 四周要有内边距才好看 */
            padding: 20px;
            border: 5px solid black;

            /* 正常盒模型：盒子的实际尺寸 = 内容宽高 + padding + border */
            /* box-sizing: content-box; */

            /* 怪异盒模型 盒子的width/height包含了:内容 + padding + border*/
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="box">
        全部分类
        美食
        外卖
        酒店HOT
        民宿
        猫眼电影
        机票 / 火车票
        休闲娱乐 / KTV
        生活服务
        丽人 / 美发 / 医学美容
        结婚 / 婚纱摄影 / 婚宴
        亲子 / 儿童乐园 / 幼教
        运动健身 / 健身中心
        家装 / 建材 / 家居
        学习培训 / 音乐培训
        医疗健康 / 宠物 / 爱车
        酒吧 / 密室逃脱
    </div>
</body>

</html>